CSS:

LAYOUT:
    selector {
        property1: value;
        property2: value;
    }

3 types of selectors:

    Element:
    div {
        property1: value;
    }

    Class: (good for reusable componenets, classes can be
            applied multiple times, seperated by spaces
            EG: <div class="red square">)
    .class-name {
        property: value;
    }

    ID: (used as unique classes for singular elements,
         should be rarely used)
    #id {
        property: value;
    }

    Everything:
    * {
        font-family: Arial;
    }

Selectors can be combined:
    #eg1.ex2 {
       property1: value;
    }

    .ancestor .child {      (div p {} will select all <p> 
        property1: value;    inside all divs)
    }

CSS will take the last change in property to a selector
and apply that to the page. This does, however, have a 
hierarchy. In order of importance:

    1)ID
    2)Class
    3)Element

body { /* colours all children (if not already coloured) */
    color: blue;
     font-size: 25px;
}
.box {
    height: 10%; /* 10% of total screen size */
    width: 1em; /* 1 unit of the size of the font px size */
    padding: 20px; /* rem ~ em, but scales from root doc, */
    margin: 50px; /*  instead of the parent font size */
    border: 10px solid black;
    background-color: red;
}




COLOURS:
Hexadecimal. R, G, B. 2 slots each, 00->FF(FF = 15x15 = 255)
EG: #0000FF = Blue

rgb. Expanded version of Hex. Base 10. 0->255
EG: rgb(0, 0, 255) = Blue

rgba. rgb, but has another slot for transparancy. 0->1
EG: rgba(0, 0, 255, .5) = Blue at half transparancy

Expanded Hex. Hex, another 2 slots at end for transparancy
EG: #0000FF00 = Blue at full transparancy (not visible)

hsl. complex. Number, percentages. Colour 0->60, 
     saturation 0-> 100%, lightness 0->100%.
     Has an hsla version, same as rgba.
EG: hsl(0, 100%, 50%) = colour, fully saturated, half light
